{include file='admin/header.html'}

<div style="padding: 15px;">
    <!-- 头工具栏 -->
    <div style="margin-bottom: -11px;padding: 10px 15px;border:1px solid #e6e6e6;">
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm layui-icon layui-icon-delete" title="批量删除"
                lay-event="delAll"></button>
            <button class="layui-btn layui-btn-sm layui-icon layui-icon-addition" title="添加"
                lay-event="add"></button>
            <button class="layui-btn layui-btn-sm layui-icon layui-icon-refresh" title="刷新"
                lay-event="refresh"></button>
        </div>
        <div class="layui-btn-group" style="float: right;">
            <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="openAll">全部展开</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="closeAll">全部关闭</button>
        </div>
    </div>

    <!-- 折叠数据表格 -->
    <table class="layui-table layui-form" id="treeTable" lay-size="md"></table>
</div>

<!-- collapse dataTable render -->
<script>
    // tableTree组件
    layui.config({
        base: '{$site_url}/static/res/layui_exts/'
    }).use(['treeTable', 'form', 'util'], function () {
        var treeTable = layui.treeTable,
            form = layui.form,
            util = layui.util,
            $ = layui.jquery;

        var site_url = '{$site_url}';
        var area_width = function () {
            return Math.min($(window).width() - 20, Math.max($(window).width() * 0.618, 480));
        };
        var area_height = function () {
            return Math.min($(window).height() - 20, Math.max($(window).height() * 0.809, 450));
        };

        // 渲染表格
        layer.load(2);
        var treeTb = treeTable.render({
            elem: '#treeTable',
            url: site_url + '/admin/auth/index.html',
            toolbar: '#toolbar',
            height: 'full',
            defaultToolbar: ['filter', 'exports', 'print'],
            icon_key: 'title',
            top_value: 0,
            primary_key: 'id',
            parent_key: 'pid',
            hide_class: 'layui-hide',
            icon: {
                open: 'layui-icon layui-icon-triangle-d',
                close: 'layui-icon layui-icon-triangle-r',
                left: 16,
            },
            cols: [
                { key: 'id', title: 'ID' },
                { key: 'title', title: '菜单树', width: '200px' },
                { key: 'controller', title: '控制器' },
                { key: 'action', title: '方法' },
                { key: 'sort', title: '排序' },
                {
                    key: 'icon', title: '图标', template: function (item) {
                        return item.icon ? '<i class="' + item.icon + '"></i>' : '';
                    }
                },
                {
                    key: 'is_menu', title: '菜单', width: '60px', template: function (item) {
                        return '<input type="checkbox" name="is_menu" lay-filter="is_menu" value="0" data-id="' + item.id + '" lay-skin="switch" lay-text="是|否"' + (item.is_menu == 0 ? ' checked' : '') + '>';
                    }
                },
                {
                    key: 'status', title: '状态', width: '60px', template: function (item) {
                        return '<input type="checkbox" name="status" lay-filter="status" value="0" data-id="' + item.id + '" lay-skin="switch" lay-text="ON|OFF"' + (item.status == 0 ? ' checked' : '') + '>';
                    }
                },
                { key: 'time', title: '时间' },
                {
                    title: '操作', align: 'center', width: '125px', template: function (item) {
                        return '<button class="layui-btn layui-btn-primary layui-btn-xs layui-icon layui-icon-add-1" title="添加下级" lay-filter="add"></button>' +
                            '<button class="layui-btn layui-btn-normal layui-btn-xs layui-icon layui-icon-edit" title="编辑" lay-filter="edit"></button>' +
                            '<button class="layui-btn layui-btn-danger layui-btn-xs layui-icon layui-icon-delete" title="删除" lay-filter="del"></button>';
                    }
                }
            ],
            checked: {},
            is_click_icon: false,
            is_checkbox: true,
            end: function (e) {
                layer.closeAll('loading');
                form.render();
            },
        });

        // 监听头工具事件
        util.event('lay-event', {
            // 批量删除菜单
            delAll: function (othis) {
                var ids = treeTable.checked(treeTb);
                if (ids.length == 0) layer.msg('请选择数据');
                $.post(site_url + '/admin/auth/delete.html', { id: ids }, function (res) {
                    if (res.code) return layer.alert(res.msg, { icon: 2 });
                    layer.msg(res.msg);
                    ids.forEach(function(id) {
                        $('#treeTable tr[data-id="' + id + '"]').remove();
                    });
                }, 'json');
            },

            // 添加菜单
            add: function (othis) {
                layer.open({
                    type: 2,
                    maxmin: true,
                    title: '添加',
                    shadeClose: true,
                    shade: 0.3,
                    area: [area_width() + 'px', area_height() + 'px'],
                    content: site_url + '/admin/auth/create.html',
                });
            },

            // 刷新
            refresh: function (othis) {
                window.location.reload();
            },

            // 全部展开
            openAll: function (othis) {
                treeTable.openAll(treeTb);
            },

            // 全部关闭
            closeAll: function (othis) {
                treeTable.closeAll(treeTb);
            }
        });

        // 监听行工具事件
        // 添加下级
        treeTable.on('tree(add)', function (obj) {
            var data = obj.item;
            layer.open({
                type: 2,
                title: '添加下级',
                shadeClose: true,
                shade: 0.3,
                area: [area_width() + 'px', area_height() + 'px'],
                content: site_url + '/admin/auth/create.html?id=' + data.id,
            });
        })

        // 编辑
        treeTable.on('tree(edit)', function (obj) {
            var data = obj.item;
            layer.open({
                type: 2,
                maxmin: true,
                title: '编辑菜单',
                shadeClose: true,
                shade: 0.3,
                area: [area_width() + 'px', area_height() + 'px'],
                content: site_url + '/admin/auth/edit/' + data.id + '.html',
            });
        })

        // 删除
        treeTable.on('tree(del)', function (obj) {
            var data = obj.item;
            layer.confirm('真的删除行么？', { icon: 3 }, function (index) {
                layer.close(index);
                $.post(site_url + '/admin/auth/delete.html', { id: data.id }, function (res) {
                    if (res.code) return layer.alert(res.msg, { icon: 2 });
                    layer.msg(res.msg);
                    $('#treeTable tr[data-id="' + data.id + '"]').remove();
                }, 'json');
            });
        })

        //列表开关事件
        form.on('switch(is_menu)', function (obj) {
            $.post(site_url + '/admin/auth/modify.html', { id: this.getAttribute('data-id'), is_menu: obj.elem.checked ? 0 : 1 }, function (res) {
                if (res.code) return layer.alert(res.msg, { icon: 2 });
                layer.msg(res.msg);
            }, 'json');
        });
        form.on('switch(status)', function (obj) {
            $.post(site_url + '/admin/auth/modify.html', { id: this.getAttribute('data-id'), status: obj.elem.checked ? 0 : 1 }, function (res) {
                if (res.code) return layer.alert(res.msg, { icon: 2 });
                layer.msg(res.msg);
            }, 'json');
        });
    });

</script>

{include file='admin/footer.html'}